<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link href="../css/mui.min.css" rel="stylesheet" />
	<link rel="stylesheet" href="css/index.css">
	<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css"/>
	<link rel="stylesheet" type="text/css" href="../css/mui.poppicker.css"/>
	<link rel="stylesheet" type="text/css" href="../css/lcs-pop.css"/>
	<link rel="stylesheet" type="text/css" href="css/empcss.css"/>
	<link rel="stylesheet" type="text/css" href="css/compatible.css"/>
	<script type="text/javascript">
		var setData = {date_type:"date", date:"today"};
	</script>
</head>

<body>
	<header class="mui-bar mui-bar-nav hbg ">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left colorw"></a>
		<h1 class="mui-title">商品统计</h1>
	</header>
	<div class="mui-content">
	<main id="content">
		<section class="mui-content financial-tab text-center" data-url='/api/product/census'>
			<ul class="mui-row">
				<li class="mui-col-xs-6" onclick="tab(event, storeChange)"> <!--onclick="tab(event, paytype)"-->
					<p>门店</p>
					<div class="financial-subtab curStore" data-store="">
						<!-- <span data-name="all">全部途径</span>
						<span data-name="普通支付">普通支付</span>
						<span data-name="现金支付">现金支付</span>
						<span data-name="移动支付">移动支付</span>
						<span data-name="微信支付">微信支付</span>
						<span data-name="支付宝支付">支付宝支付</span>
						<span data-name="其它">其它</span> -->
					</div>
				</li>
				<li class="mui-col-xs-6" onclick="tab(event, changeDate)">
					<p>今日</p>
					<div class="financial-subtab">
						<span data-type="date" data-date="today">今天</span>
						<span data-type="date" data-date="yesterday">昨天</span>
						<span data-type="custom" data-date="week">本周</span>
						<span data-type="custom" data-date="month">本月</span>
						<span class="none" onclick="timeStep(event)">时间段</span>
					</div>
				</li>
			</ul>
		</section>
		<section class="main-title container border"><img src="http://placehold.it/38x38" alt="" /><span>商品销售分析</span></section>
		<div class="container text-center salesvolume">
			<div class="mui-row product-sort">
				<div class="mui-col-xs-6 active" data-sort="asc">畅销榜</div>
				<div class="mui-col-xs-6" data-sort="desc">滞销榜</div>
			</div>
		</div>
		<div id="analysis" style="height: 400px; width: 100%;"></div>

		<section class="main-title container border clear">
			<img src="http://placehold.it/38x38" alt="" /><span>商品销售走势</span>
			<span class="pull-right">共计<b id="number">0</b>件</span>
		</section>

		<div id="trend" class="" style="height: 300px"></div>

		<section class="table container text-center profit-table table-col-3"></section>

		<div id="popover" class="mui-popover">
			<div class="listdiv">
				<div class="mui-input-row borbot" >
					<label>开始时间:</label>
					<div class="place items">
						<button id='starttime' data-time="" onclick="changTime(event)" type="button" class="mui-btn mui-btn-blue mui-btn-outlined">开始时间</button>
					</div>
				</div> 
				<div class="mui-input-row borbot" >
					<label>结束时间:</label>
					<div class="place items">
						<button id='endtime' data-time="" onclick="changTime(event)" type="button" class="mui-btn mui-btn-blue mui-btn-outlined">结束时间</button>
					</div>
				</div>
				<button type="button" id="okbut" class="mui-btn mui-btn-blue mui-btn-block">确定</button>
			</div>
		</div>
	</main>
	</div>
</body>
<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/mui.min.js"></script>
<script src="js/echarts.js"></script>
<script src="../js/muishow.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/req.js" type="text/javascript" charset="utf-8"></script>

<script src="../js/mui.picker.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/city.data.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
<script src="js/commont.js"></script>
<script type="text/javascript">
	//mui.init()
	var data_store = {}
	var _sort = 'asc'
	var analysis = document.getElementById("analysis");
	var myChart = echarts.init(analysis);

	var trend = document.getElementById("trend");
	var myChart2 = echarts.init(trend);

	function fn1(_data) {

		var data_title = []
		var data_value = []

		_data = sort(_data, _sort);

		if (_data.length > 0) {
			_data.forEach(function(cur, index){
				data_title.push(cur['product_name'])
				data_value.push(cur['sell_number'])
			})
		}

		var option = {
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'shadow'
				}
			},
			grid: {
				left: '3%',
				right: '4%',
				top: '5%',
				bottom: '3%',
				containLabel: true
			},
			xAxis: {
				type: 'value',
				boundaryGap: [0, 0.01]
			},
			yAxis: {
				type: 'category',
				data: data_title,
				axisLabel: {
					formatter: function(name, index) {
						var newText = name;
						if (name.length > 4) {
							var textArray = name.split('')
							textArray.splice(4, 0, '\n')

							newText = textArray.join('')

						}
						return newText
					},
					fontSize : 10,
				},

			},
			itemStyle: {
				color: '#4174D6'
			},
			series: [{
				type: 'bar',
				data: data_value,
				barMaxWidth: 40
			}]
		};
		return option;
	}

	function fn2(_data) {
		
		var data_title = []
		var data_value = []

		if (_data.length > 0) {
			_data.forEach(function(cur, index){
				//var ci = cur['order_info'].length > 0 ? cur['order_info'][0]['number'] : 0
				data_title.push(cur['time'].slice(5))
				data_value.push(cur['product_number'])
			})

		}
		
		var option = {
				tooltip: {
					trigger: 'axis'
				},

				grid: {
					left: '3%',
					right: '4%',
					top: '5%',
					containLabel: true
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: data_title,
					axisLabel : {
						fontSize : 10
					}
				},

				yAxis: {
					type: 'value',
					axisLine: {
						show: false
					},
					axisTick: {
						show: false
					}
				},
				series: [{
					name: '数量',
					type: 'line',
					stack: '数量',
					itemStyle: {
						color: '#87EDFA'
					},
					data: data_value
				},
			]
		};

		if(_data.length > 8){
			option['dataZoom'] = [{
				type: 'inside',
				show: true, //flase直接隐藏图形
				xAxisIndex: [0],
				left: '9%', //滚动条靠左侧的百分比
				bottom: -5,
				start: 0,//滚动条的起始位置
				end: 60 ,//滚动条的截止位置（按比例分割你的柱状图x轴长度）
			}]
		}

		return option
	}

	function requireData(_data){

		var store = $('.curStore').data('store');
		if(!!store){
			_data['data']['store_id'] = store
		}else{
			delete _data['data']['store_id']
		}
		_data['data'].access_token = acctoken()

		if(_data.data['date_type'] == 'date'){
			$('.singleday').hide()
		}else{
			$('.singleday').show()
		}

		ajax(_data, function (res){
			
			var data = res.data

			data_store = data;

			var html = ['<div class="table-th"><span class="table-td">时间</span><span class="table-td">数量(个)</span><span class="table-td">金额(元)</span></div>']
			
			data['product_trend'].forEach(function(cur, index, array){
				var tpl =
					`<div class='table-tr'><span class='table-td'>${cur['time'].substr(5)}</span><span class='table-td'>${cur['product_number']}</span><span class='table-td'>${cur['order_money']}</span>
					</div>`;
				html.push(tpl)
			})
			
			html.push(`<div class="table-th"><span class="table-td"><b>合计</b></span><span class="table-td"><b>${data['sell_trend_number']}</b></span><span class="table-td"><b>${data['order_money_all']}</b></span></div>`)

			$('.table').html(html.join(''));
			
			setEcharts(myChart2, data['product_trend'], fn2)
			setEcharts(myChart, data['product_analyse'], fn1)
			$('#number').text(data['sell_trend_number'])
		})
	}

	$('.product-sort').tab({
		children : 'div',
		curClass : 'active',
		callback : function (_sub, _index){
			var s = _sub.data('sort');
			_sort = s;
			setEcharts(myChart, data_store['product_analyse'], fn1)
		}
	})

	$(function() {
		requireData({
			url: '/api/product/census',
			data: {
				date_type : 'date',
				date : 'today'
			}
		})

	})
	
	// 手动触发图表大小
	window.addEventListener("resize", function (){
		myChart.resize();
		myChart2.resize();
	});
</script>
</html>
